import React from 'react';
import {connect} from 'dva';
import PropTypes from 'prop-types';
import reqwest from 'reqwest';
import {Link} from 'dva/router'
import {AutoComplete, Button,Row,Col,Icon,Layout,Input,Form,Breadcrumb,Select,Affix,Card} from 'antd';
import style from '../../styles/ResetInput.less';
import inStyle from '../../styles/Info.less';
import {numvail,selectvail} from '../../utils/Validator.js'
import CityPick from '../../components/CityPick.js';
const FormItem = Form.Item;
const Option =Select.Option;
const AutoOption = AutoComplete.Option;
class CustomerDetails extends React.Component{
	constructor(props){
		super(props)
		this.state={
			result:[],
			province:'',
			city:'',
			area:'',
		}
	}
	handleCityChange(e,obj){
  	this.setState({
  		province:obj[0]==undefined?undefined:obj[0].label,
  		city:obj[1]==undefined?undefined:obj[1].label,
  		area:obj[2]==undefined?undefined:obj[2].label,
  		// street:obj[3]==undefined?undefined:obj[3].label
  	})
  }
	handleSubmit(e){
    // console.log(e)
    e.preventDefault();
    const {province, city,area,street} =this.state;
    this.props.form.validateFields((err, values) => {
      console.log(err);
      if (!err) {
        console.log('Received values of form: ', values);
        console.log(values.caizhi)
      	_this.postserver({
      		id:_this.props.location.query.id,
      		customer:{name:values.name,tel:values.iphone,province:province,city:city,area:area,street:values.address,}
      	})
      }
    });
    // console.log(1);
	}
	postserver(params={}){
		const {province,city,area} = this.state;
		reqwest({
     	 url: window.host+'/api/customers',
	      method: 'post',
	      crossOrigin: true,
	      data: {
	        access_token:localStorage['token'],
	        customer:{name:params.customer.name,tel:params.customer.tel,province:province,city:city,area:area,steet,param.customer.street,remark:params.customer.remark}
	      },
	      type: 'json',
	    }).then((data) => {
	      console.log(1);
	    }).fail((err)=>{
				console.log(2)
		})
	}
	loadserver(params={}){
	reqwest({
      url: window.host+'/api/customers',
      method: 'post',
      crossOrigin: true,
      data: {
        access_token:localStorage['token'],
        page:params.page,
      },
      type: 'json',
    }).then((data) => {
      this.setState({
        loading: false,
        data: _data,
        pagination,
      });
    });
	}
	componentWillMount(){
	}
	autoChange(value){
		let result;
		if(!value ||value.indexOf('@') >= 0){
			result = [];
		}else{	
			result=['qq.com','163.com','alibaba.com.cn','126.com','sina.com','139.com','sohu.com'].map(domain => `${value}@${domain}`);
		}
		this.setState({result,email:value});
	}
	render(){
		const formItemLayout = {
      labelCol: { span: 8},
      wrapperCol: { span: 14 },
      style:{minWidth:200}
    };
    const emailChildren = this.state.result.map((email) => {
      return <AutoOption key={email}>{email}</AutoOption>;
    });
		const {getFieldDecorator}=this.props.form;
		return(
			<Layout style={{background:'#fff'}}>
				<Form className={`${inStyle.ncc_left_layout}`}>
					<Row>
						<Breadcrumb style={{ height:60,lineHeight:'60px',fontSize:14}}>
	              <Breadcrumb.Item>创建客户</Breadcrumb.Item>
	       		</Breadcrumb>
       		</Row>
					<Row type='flex'>
						<Col span={8} >
							<FormItem {...formItemLayout} label='性别'>
								{getFieldDecorator('sex',{
									initialValue:'boy'
								})(
									<Select className={`${style.ncc_reset_border}`}  onChange={(e)=>{this.setState({payMethods:e})}} optionFilterProp='children' showSearch>
										<Option value="boy">男</Option>
										<Option value="girl">女</Option>
									</Select>
								)}
							</FormItem>
						</Col>
						<Col span={8}>
							<FormItem {...formItemLayout} label='客户所有者'>
								{getFieldDecorator('customer',{
									initialValue:'boy'
								})(
									<Select className={`${style.ncc_reset_border}`} onChange={(e)=>{this.setState({payMethods:e})}} optionFilterProp='children' showSearch>
										<Option value="you">你</Option>
										<Option value="me">我</Option>
									</Select>
								)}
							</FormItem>
						</Col>
					</Row>	
					<Row type='flex'>
						<Col span={8}>
							<FormItem {...formItemLayout} label='阶段'>
								{getFieldDecorator('lv',{
									initialValue:'boy'
								})(
									<Select className={`${style.ncc_reset_border}`} onChange={(e)=>{this.setState({payMethods:e})}} optionFilterProp='children' showSearch>
										<Option value="boy">男</Option>
										<Option value="girl">女</Option>
									</Select>
								)}
							</FormItem>
						</Col>
						<Col span={8}>
							<FormItem {...formItemLayout} label='种类'>
								{getFieldDecorator('spetype',{
									initialValue:'boy'
								})(
									<Select className={`${style.ncc_reset_border}`} onChange={(e)=>{this.setState({payMethods:e})}} optionFilterProp='children' showSearch>
										<Option value="you">你</Option>
										<Option value="me">我</Option>
									</Select>
								)}
							</FormItem>
						</Col>
					</Row>	
					<Row>
						<Breadcrumb style={{ height:60,lineHeight:'60px',fontSize:14}}>
	              <Breadcrumb.Item>练习方式</Breadcrumb.Item>
	       		</Breadcrumb>
       		</Row>
       		<Row type='flex'>
       			<Col span={8}>
							<FormItem {...formItemLayout} label='电话'>
								{getFieldDecorator('phone')(
									<Input className={`${style.ncc_reset_input}`} placeholder='请输入电话' />
								)}
							</FormItem>
						</Col>
						<Col span={8}>
							<FormItem {...formItemLayout} label='邮箱'>
								{getFieldDecorator('email')(
									<AutoComplete className={`${style.ncc_reset_au}`} placeholder='请输入邮箱地址' onChange={this.autoChange.bind(this)}>{emailChildren}</AutoComplete>
								)}
							</FormItem>
						</Col>
       		</Row>
       		<Row type='flex'>
       			<Col span={8}>
							<FormItem {...formItemLayout} label='微信/QQ'>
								{getFieldDecorator('wxqq')(
									<Input className={`${style.ncc_reset_input}`} placeholder='请输入微信/QQ' />
								)}
							</FormItem>
						</Col>
						<Col span={8}>
							<FormItem {...formItemLayout} label='传真'>
								{getFieldDecorator('fax')(
									<Input className={`${style.ncc_reset_input}`} placeholder='请输入传真' />
								)}
							</FormItem>
						</Col>
       		</Row>
       		<Row>
						<Breadcrumb style={{ height:60,lineHeight:'60px',fontSize:14}}>
	              <Breadcrumb.Item>公司信息</Breadcrumb.Item>
	       		</Breadcrumb>
       		</Row>
       		<Row type='flex'>
       			<Col span={8}>
							<FormItem {...formItemLayout} label='国家/地区'>
								{getFieldDecorator('national')(
									<Input className={`${style.ncc_reset_input}`} placeholder='请输入国家/地区' />
								)}
							</FormItem>
						</Col>
						<Col span={8}>
							<FormItem {...formItemLayout} label='邮编'>
								{getFieldDecorator('zipcode')(
									<Input className={`${style.ncc_reset_input}`} placeholder='请输入国家/地区' />
								)}
							</FormItem>
						</Col>
       		</Row>
       		<Row type='flex'>
       			<Col span={8}>
							<FormItem {...formItemLayout} label='公司'>
								{getFieldDecorator('company')(
									<Input className={`${style.ncc_reset_input}`} placeholder='请输入公司' />
								)}
							</FormItem>
						</Col>
						<Col span={8}>
							<FormItem {...formItemLayout} label='职务'>
								{getFieldDecorator('job')(
									<Input className={`${style.ncc_reset_input}`} placeholder='请输入职务' />
								)}
							</FormItem>
						</Col>
       		</Row>
       		<Row type='flex'>
       			<Col span={8}>
							<FormItem {...formItemLayout} label='省市区'>
								{getFieldDecorator('city',{
									// initialValue:'boy'
									rules:[{required:true,message:'请选择地址',validator:(rule,value,callback)=>{
										selectvail(rule,value,callback,'请选择地址')
									}}]
								})(
									<CityPick onChange={this.handleCityChange.bind(this)} s={{border:'none'}} caclass={`${style.ncc_reset_input}`} placeholder='省市区' />
								)}
							</FormItem>
						</Col>
       		</Row>
       		<Row type='flex'>
						<Col span={8}>
							<FormItem {...formItemLayout} label='详细地址'>
								{getFieldDecorator('detailAddress')(
									<Input className={`${style.ncc_reset_input}`} placeholder='请输入详细地址' />
								)}
							</FormItem>
						</Col>
       		</Row>
       		<Row >
						<Breadcrumb style={{ height:60,lineHeight:'60px',fontSize:14}}>
	              <Breadcrumb.Item>备注</Breadcrumb.Item>
	       		</Breadcrumb>
       		</Row>
       		<Row >
       			<Col>
							<FormItem  labelCol={ {span:2}} wrapperCol={{span:12}} label='备注'>
								{getFieldDecorator('beizhu')(
									<Input className={`${style.ncc_reset_input}`} placeholder='请输入备注' />
								)}
							</FormItem>
						</Col>
       		</Row>
       		<FormItem style={{marginLeft:'-15px',}}>
	       		<Affix target={() => console.log(this)}>
	       			<Card>
		            <Button htmlType="submit" type="primary">
		              创建
		            </Button>
	      		  </Card>
	          </Affix>
          </FormItem>
				</Form>			
			</Layout>
		)
	}
}
 
const CustomerDetailsForm = Form.create()(CustomerDetails);

export default connect()(CustomerDetailsForm)
